<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload=function(){
			var oTab=document.getElementById('tab1');
            var oBtn=document.getElementById('btn1');
            oBtn.onclick=function (){
               var arr=[];
               for(var i=0;i<oTab.tBodies[0].rows.length;i++){
               	arr[i]=oTab.tBodies[0].rows[i];
               }
               arr.sort(function(tr1,tr2){
                var n1=parseInt(tr1.cells[0].innerHTML);
                var n2=parseInt(tr2.cells[0].innerHTML);
                return n1-n2;
               })
               for(var i=0;i<arr.length;i++){
               	oTab.tBodies[0].appendChild(arr[i]);
               }
            }
		};


	</script>
</head>
<body>
 <input id="btn1" type="button" value="排序">
 	<table id="tab1" border="1" width="500">
 	<thead>
 		<td>ID</td>
 		<td>姓名</td>
 		<td>年龄</td>
 		<td>操作</td>
 	</thead>
 	<tbody>
 		<tr>
 			<td>1</td>
 			<td>Blue</td>
 			<td>28</td>
 			<td></td>
 		</tr>
 		
 		<tr>
 			<td>3</td>
 			<td>王五</td>
 			<td>22</td>
 			<td></td>
 		</tr>
 		<tr>
 			<td>4</td>
 			<td>小二</td>
 			<td>28</td>
 			<td></td>
 		</tr>
 		<tr>
 			<td>2</td>
 			<td>张三</td>
 			<td>23</td>
 			<td></td>
 		</tr>
 		<tr>
 			<td>5</td>
 			<td>许二</td>
 			<td>28</td>
 			<td></td>
 		</tr>
 		<tr>
 			<td>6</td>
 			<td>张二</td>
 			<td>22</td>
 			<td></td>
 		</tr>
 		<tr>
 			<td>7</td>
 			<td>王二</td>
 			<td>22</td>
 			<td></td>
 		</tr>
 		<tr>
 			<td>8</td>
 			<td>三二</td>
 			<td>22</td>
 			<td></td>
 		</tr>
 	</tbody>
</body>
</html>